<template>
  <div class="dingwei">
    <div class="shop">
      <div class="title">
        <p>我的全部购物车</p>
      </div>
      <div class="name_list" v-for="item in lister" :key="item.id">
        <van-swipe-cell>
          <van-card
            :price="item.s_good.price"
            :title="item.s_good.name"
            :desc="item.s_good.desc"
            class="goods-card"
            :thumb="item.s_good.s_goods_photos[0].path"
          >
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delcart(item.id)"
            />
          </template>
          <div class="box">
            <van-checkbox v-model="item.ischecked"></van-checkbox>
          </div>
          <div class="number">
            <!-- 加减按钮 -->
            <van-stepper
              v-model="item.num"
              @change="jia({ id: item.id, num: item.num })"
              theme="round"
              button-size="22"
              disable-input
            />
          </div>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar
      :price="all"
      button-text="去结算"
      class="go_dingdan"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkeAll">全选</van-checkbox>
    </van-submit-bar>
    <Docker :changeClass="'shopcart'" />
  </div>
</template>

<script setup>

import { computed, ref } from 'vue'
import Docker from '../../components/Docker.vue'
import { get, delcar, addToCart, post } from '../../utils/request.js'


// 引入vant
import { SubmitBar } from 'vant';
import { Toast } from 'vant';
import { Stepper } from 'vant';
import { SwipeCell } from 'vant';
import { useStore } from 'vuex'
const store = useStore()

import { useRoute, useRouter } from 'vue-router'
let router = useRouter()
let route = useRoute()


let lister = ref([])
// 获取商品列表
function shop_name () {
  get(`/shoppingCart?project_id=242`).then(res => {
    console.log(res);
    res.result.forEach(ele => {
      ele.ischecked = true
    });
    lister.value = res.result
  })

}
shop_name()

// 商品数量加减
const jia = async ({ num, id }) => {
  let token = sessionStorage.getItem('token')
  let data = {
    num
  }
  let rest = await addToCart(`/shoppingCart/${id}`, token, data).then(res => {
    console.log(res);
  })
}

// 删除商品
const delcart = (id) => {
  let token = sessionStorage.getItem('token')
  delcar(`/shoppingCart/${id}`, token).then(res => {
  })
  shop_name()
}

// 全选 反选
let checkeAll = computed({
  get: function () {
    return lister.value.every(ele => ele.ischecked)
  },
  set: function (newvalue) {
    console.log(newvalue);
    lister.value.forEach(ele => {
      ele.ischecked = newvalue
    })
  }
})

// 商品总价
let all = computed(() => {
  let money = 0
  lister.value.forEach(ele => {
    if (ele.ischecked) {
      money += ele.s_good.price * ele.num * 100
    }
  })
  return money

})


//去订单页
const onSubmit = () => {
  console.log(lister.value);
  let newArr = lister.value.filter(ele => ele.ischecked === true)
  console.log(newArr);
  store.state.user.list = newArr
  router.push('/Ordergoods')
}


</script>

<style lang="scss" scoped>
.dingwei {
  flex-direction: column;
  width: 3.79rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  margin: 0 auto;
}

.shop {
  overflow-y: auto;
  width: 3.6rem;
}

.title {
  text-align: center;
  line-height: 0.44rem;
  font-size: 16px;
  color: #333333;
  width: 100%;
  height: 0.44rem;
}

.goods-card {
  margin: 0;
  background-color: #eeeaea;
  border-radius: 0.15rem;
  height: 1.2rem;
  margin-bottom: 0.16rem;
}

.delete-button {
  height: 100%;
  border-radius: 0.15rem;
}

.go_dingdan {
  width: 100%;
  bottom: 0.5rem;
  .buy {
    display: flex;
    width: 0.5rem;
  }
}

.checkbox {
  position: absolute;
  left: 0;
  top: 0.2rem;
}

.name_list {
  position: relative;

  .number {
    position: absolute;
    right: 0.1rem;
    z-index: 99;
    bottom: 0.02rem;
  }

  .box {
    position: absolute;
    left: 0.16rem;
    z-index: 99;
    bottom: 0.02rem;
  }
}
</style>